import { Tabs } from '@aws-amplify/ui-react';
import { ExampleCode } from '@/components/Example';
import Liveness from './liveness-service-setup.mdx';

<Liveness />

### Step 2. Install dependencies

FaceLivenessDetector component is built using [Jetpack Compose](https://developer.android.com/jetpack/compose). Enable Jetpack Compose by adding the following to the `android` section of your **app**'s `build.gradle` file:

```groovy
compileOptions {
    // Support for Java 8 features
    coreLibraryDesugaringEnabled true
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
}
buildFeatures {
    compose true
}
composeOptions {
   kotlinCompilerExtensionVersion '1.5.3'
}
```

Add the following dependencies to your **app**'s `build.gradle` file and click "Sync Now" when prompted:

```groovy
dependencies {
    // FaceLivenessDetector dependency
    implementation 'com.amplifyframework.ui:liveness:1.5.0'
    
    // Amplify Auth dependency (unnecessary if using your own credentials provider)
    implementation 'com.amplifyframework:aws-auth-cognito:2.29.0'
    
    // Material3 dependency for theming FaceLivenessDetector
    implementation 'androidx.compose.material3:material3:1.1.2'
    
    // Support for Java 8 features
    coreLibraryDesugaring 'com.android.tools:desugar_jdk_libs:1.1.5'
}
```

### Step 3. Initialize Amplify Auth

In the `onCreate` of your `Application` class, add the Auth plugin before calling `Amplify.configure`.

<Tabs.Container defaultValue="Kotlin" justifyContent="flex-start">
<Tabs.List>
<Tabs.Item value="Kotlin">Kotlin</Tabs.Item>
<Tabs.Item value="Java">Java</Tabs.Item>
<Tabs.Item value="RxJava">RxJava</Tabs.Item>
</Tabs.List>
  <Tabs.Panel value="Kotlin">
    <ExampleCode>
    ```kotlin
    // Add these lines to include the Auth plugin.
    Amplify.addPlugin(AWSCognitoAuthPlugin())
    Amplify.configure(applicationContext)
    ```
    </ExampleCode>
  </Tabs.Panel>
  <Tabs.Panel value="Java">
    <ExampleCode>
    ```java
    // Add these lines to include the Auth plugin.
    Amplify.addPlugin(new AWSCognitoAuthPlugin());
    Amplify.configure(getApplicationContext());
    ```
    </ExampleCode>
  </Tabs.Panel>
  <Tabs.Panel value="RxJava">
      Follow the [Amplify Android documentation](https://docs.amplify.aws/lib/project-setup/rxjava/q/platform/android/#installation) to start using Amplify for RxJava (RxAmplify).
      <ExampleCode>
      ```java
      // Add these lines to include the Auth plugin.
      RxAmplify.addPlugin(new AWSCognitoAuthPlugin());
      RxAmplify.configure(getApplicationContext());
      ```
      </ExampleCode>
    </Tabs.Panel>
</Tabs.Container>

### Step 4. Request camera permissions

FaceLivenessDetector requires access to the camera on the user's device in order to perform the Face Liveness check. Before displaying FaceLivenessDetector, prompt the user to grant camera permission. Please follow these guides for examples of requesting camera permission using either [Android](https://developer.android.com/training/permissions/requesting) or [Jetpack Compose](https://google.github.io/accompanist/permissions/).

### Step 5. Add FaceLivenessDetector

<Tabs.Container defaultValue="Kotlin" justifyContent="flex-start">
<Tabs.List>
<Tabs.Item value="Kotlin">Kotlin</Tabs.Item>
<Tabs.Item value="Java">Java</Tabs.Item>
<Tabs.Item value="RxJava">RxJava</Tabs.Item>
</Tabs.List>
  <Tabs.Panel value="Kotlin">
    In the `onCreate` of your app's `MainActivity`, add the following code to display FaceLivenessDetector, replacing `<session ID>` with the session ID returned from creating the Face Liveness session and replacing `<region>` with the region you would like to use for the Face Liveness check. The list of supported regions is in the [Amazon Rekognition Face Liveness developer guide](https://docs.aws.amazon.com/general/latest/gr/rekognition.html). The code below wraps FaceLivenessDetector in a MaterialTheme that uses the Face Liveness color scheme. More information about theming is in the [Face Liveness Customization page](./liveness/customization).
    <ExampleCode>
    ```kotlin
    setContent {
        MaterialTheme(
            colorScheme = LivenessColorScheme.default()
        ) {
            FaceLivenessDetector(
                sessionId = <session ID>,
                region = <region>,
                onComplete = {
                     Log.i("MyApp", "Face Liveness flow is complete")
                     // The Face Liveness flow is complete and the session
                     // results are ready. Use your backend to retrieve the
                     // results for the Face Liveness session.
                },
                onError = { error ->
                     Log.e("MyApp", "Error during Face Liveness flow", error)
                     // An error occurred during the Face Liveness flow, such as
                     // time out or missing the required permissions.
                }
            )
        }
    }
    ```
    </ExampleCode>
  </Tabs.Panel>
  <Tabs.Panel value="Java">
    FaceLivenessDetector must be created in Kotlin but can still be used in a Java-based app. First, create a new Kotlin file called `MyView` and add the following code to create FaceLivenessDetector, replacing `<session ID>` with the session ID returned from creating the Face Liveness session and replacing `<region>` with the region you would like to use for the Face Liveness check. The list of supported regions is in the [Amazon Rekognition Face Liveness developer guide](https://docs.aws.amazon.com/general/latest/gr/rekognition.html). The code below wraps FaceLivenessDetector in a MaterialTheme that uses the Liveness color scheme. More information about theming is in the [Liveness Customization page](./liveness/customization).
    <ExampleCode>
    ```kotlin
    object MyView {
        fun setViewContent(activity: ComponentActivity) {
            activity.setContent {
                MaterialTheme(
                    colorScheme = LivenessColorScheme.default()
                ) {
                    FaceLivenessDetector(
                        sessionId = <session ID>,
                        region = <region>,
                        onComplete = {
                            Log.i("MyApp", "Face Liveness flow is complete")
                            // The Face Liveness flow is complete and the
                            // session results are ready. Use your backend to
                            // retrieve the results for the Face Liveness session.
                        },
                        onError = { error ->
                            Log.e("MyApp", "Error during Face Liveness flow", error)
                            // An error occurred during the Face Liveness flow, such
                            // as time out or missing the required permissions.
                        }
                    )
                }
            }
        }
    }
    ```
    </ExampleCode>
    In the `onCreate` of your app's `MainActivity`, add the following code to display FaceLivenessDetector:
    <ExampleCode>
    ```java
    MyView.setViewContent(this);
    ```
    </ExampleCode>
  </Tabs.Panel>
</Tabs.Container>
